import React, { Component } from 'react';
import {
	StyleSheet, Text, View, PixelRatio, TextInput, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
const scale = GLOBAL.SCALE;
export class UpDown extends Component {
	constructor(props) {
		super(props);
		let { value, selectIndex, keyboardType, editable } = this.props;
		this.state = {
			selectIndex,
			value,
			editable
		}
	}

	_setIndex (index, editable) {
		if (!editable) return
		let { callBack } = this.props;
		if (this.state.value == '0') {
			this.setState({
				value: '',
				selectIndex: index
			}, function () {
				callBack && callBack({
					value: this.props.value,
					selectIndex: this.state.selectIndex
				});
			})
		} else {
			this.setState({
				selectIndex: index
			}, function () {
				callBack && callBack({
					value: this.props.value,
					selectIndex: this.state.selectIndex
				});
			})
		}
	}

	render () {
		let { selectIndex, value, editable } = this.state;
		let { callBack, keyboardType, unit, unitStyle, onBlurFn, onFocusFn } = this.props;
		value = this.props.value || value;
		selectIndex = this.props.selectIndex || selectIndex;
		editable = this.props.editable || editable;
		return (
			<View style={styles.ItemBox}>
				<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
					<Text onPress={() => { this._setIndex(0, editable) }} style={[styles.item, selectIndex == 0 ? styles.itemActive : null]}>升</Text>
					<Text onPress={() => { this._setIndex(1, editable) }} style={[styles.item, selectIndex == 1 ? styles.itemActive : null]}>贴</Text>
				</View>
				<TextInput
					underlineColorAndroid='transparent'
					keyboardType={keyboardType}
					placeholder={'请输入'}
					placeholderTextColor={"#eee"}
					editable={editable}
					value={value}
					style={styles.itemInput}
					onBlur={() => {
						onBlurFn && onBlurFn()
					}}
					onFocus={() => {
						onFocusFn && onFocusFn()
					}}
					onChangeText={(text) => {
						const newText = text.replace(/[^\d^\.]+/, '');

						if (newText != '') {
							if (newText == 0) {
								this.setState({ selectIndex: 0 });
							} else {
								if (this.state.selectIndex == 3) {
									this.setState({ selectIndex: 0 });
								}
							}
						}

						this.setState({ value: newText }, function () {
							callBack && callBack({
								value: this.state.value,
								selectIndex: selectIndex
							});
						});
					}}
				/>
				<Text style={[styles.unit, unitStyle ? unitStyle : null]}>{unit}</Text>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	itemInput: {
		width: '100%',
		flex: 1,
		height: 46 * scale,
		paddingVertical: 0,
		paddingRight: 80 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
		textAlign: 'right'
	},
	ItemBox: {
		paddingLeft: 22 * scale,
		flexDirection: 'row',
		alignItems: 'center',
	},
	item: {
		width: 22 * scale,
		height: 22 * scale,
		lineHeight: 22 * scale,
		borderRadius: 2 * scale,
		color: style.color.darkGray,
		textAlign: 'center',
		backgroundColor: style.color.smallBlack,
		borderRadius: 4 * scale,
		marginRight: 16 * scale
	},
	itemActive: {
		backgroundColor: style.color.cerulean,
		color: style.color.white
	},
	unit: {
		position: 'absolute',
		right: 24 * scale,
		top: 14 * scale,
		color: '#8b8b8b',
		fontSize: 12 * scale
	}
})